<template>
  <div class="contentLogin">
    <div class="phoneAuth">
      <div class="innerAuth">司机验证</div>
    </div>
    <div class="container">
      <form action="" method="get" class="form" style="background-color: white">
        <div class="formItem" style="border-top: 0.543vw solid #ccc">
          <div class="lable">手机号:</div>
          <div class="inpuItem">
            <input type="text" name="" ref="phone" placeholder="请输入手机号" />
            <div></div>
          </div>
        </div>
        <div class="formItem">
          <div class="lable">验证码:</div>
          <div class="inpuItemt">
            <input type="text" name="" ref="code" placeholder="请输入手机短信验证码" maxlength="6" />
            <div class="send">
              <div class="send-btn" id="send-btn" @click="disabled && getCode($event)">
                {{ btnTitle }}
              </div>
            </div>
          </div>
        </div>
        <div>{{ tips }}</div>
        <div class="simulation" @click="login">登录</div>
        <img class="logo" src="@/img/logo.png" alt="" />
      </form>
    </div>
    <tips></tips>
  </div>

</template>

<script>
import '@/js/aui-toast'
import tips from'@/components/tips.vue'
var toast = new auiToast();
export default {
  data() {
    return {
      disabled: true,
      btnTitle: "获取验证码",
      tips: "",
      codeValue: "",
    };
  },
  methods: {
    validateBtn: function () {
      //倒计时
      let btn = document.getElementById("send-btn");
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.btnTitle = "获取验证码";
          this.disabled = true;
        } else {
          this.btnTitle = time + "秒后重试";
          this.disabled = false;
          time--;
        }
      }, 1000);
    },
    getCode: function (e) {
      e.preventDefault();
      e.stopPropagation();
      let _this = this;
      if (!/^1[345678]\d{9}$/.test(this.$refs.phone.value)) {
        toast.fail({
          title: "手机号码错误",
          duration: 2000,
        });
      } else {
        this.validateBtn();
        axios
          .get("/api/sms", {
            params: {
              phone: this.$refs.phone.value,
            },
          })
          .then((res) => {
            if (res.data.code == "1") {
              toast.success({
                title: "验证码已发送",
                duration: 2000,
              });
              _this.codeValue = res.data.codeValue;
            } else {
              toast.fail({
                title: "验证码发送失败",
                duration: 2000,
              });
            }
          });
      }
    },
    login: function () {
      console.log(this.codeValue);
      if (!/^1[345678]\d{9}$/.test(this.$refs.phone.value)) {
        toast.fail({
          title: "请输入正确的手机号",
          duration: 2000,
        });
        return false;
      }
      if (this.$refs.code.value != this.codeValue || this.codeValue == "") {
        toast.fail({
          title: "请输入正确的验证码",
          duration: 2000,
        });
        return false;
      }
      axios
        .get("/api/register", {
          params: {
            phone: this.$refs.phone.value,
          },
        })
        .then((res) => {
          if (res.data.code == "1") {
            toast.success({
              title: "注册成功",
              duration: 2000,
            });
            setInterval(() => {
              window.location.replace("<%=redirect%>");
            }, 2000);
            //跳转链接
          } else {
            toast.fail({
              title: "很抱歉,您没有权限查看,请联系管理员",
              duration: 4000,
            });
          }
        });
    },
  },
  components:{
    tips
  }

};
</script>

<style scoped>
 * {
     margin: 0 auto;
     padding: 0 0;
 }
 
 .contentLogin {
     width: 100%;
     position: relative;
     box-sizing: border-box;
 }
 
 .phoneAuth {
     position: absolute;
     width: 100%;
     height: 40vw;
     overflow: hidden;
     background-image: url('@/img/TopBg.jpg');
     background-size: 100% 100%;
 }
 
 .innerAuth {
     position: relative;
     top: 20.267vw;
     color: white;
     border-radius: 8vw;
     font-size: 25px;
     text-align: center;
     line-height: 10.667vw;
     overflow: hidden;
 }
 
 .container {
     position: absolute;
     width: 100%;
     margin: 0 auto;
     padding: 0 0.533vw;
     top: 49.333vw;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
 }
 
 .form {
     width: 100%;
     overflow: hidden;
     /* margin: 0 auto; */
     box-sizing: border-box;
 }
 
 .formItem {
     width: 100%;
     height: 25.333vw;
     border-bottom: 0.543vw solid #ccc;
     font-size: 4.8vw;
     padding: 0 5.867vw;
     box-sizing: border-box;
     overflow: hidden;
 }
 
 .lable {
     width: 100%;
     height: 10.667vw;
     line-height: 10.667vw;
     font-size: 5.333vw;
     color: #20358e;
     text-align: left;
 }
 
 input:focus {
     outline: none;
 }
 
 .inpuItem {
     width: 100%;
     height: 10.667vw;
 }
 
 .inpuItem input {
     height: 10.667vw;
     width: 100%;
     font-size: 4.8vw;
     border: none;
 }
 
 .inpuItemt {
     width: 100%;
     height: 10.667vw;
     display: flex;
 }
 
 .inpuItemt input {
     height: 10.667vw;
     flex: 1;
     font-size: 4.8vw;
     border: none;
 }
 
 .inpuItemt .send {
     flex: 0.7;
     line-height: 8vw;
 }
 
 .inpuItemt .send div {
     margin-top: 1.333vw;
 }
 
 .simulation {
     position: relative;
     display: flex;
     width: 24.8vw;
     font-size: 8vw;
     height: 11.933vw;
     color: white;
     border-radius: 2.667vw;
     background: #5ea75e;
     border: none;
     top: 20vw;
     text-align: center;
     justify-content: center;
     margin: 0 auto;
 }
 
 .logo {
     display: block;
     border: none !important;
     margin: 29.333vw auto 0vw;
     width: 70.667vw;
     height: 20.867vw;
 }
 
 .send-btn {
     margin: 0 auto;
     text-align: center;
     background-color: #5ea75e;
     border-radius: 2vw;
     color: white;
     width: 90%;
     transition: all 1s;
 }
 
 .send-btn:active {
     background-color: #ccc;
 }
</style>